<template>
	<view>

		<view class="scroll">
			<view class="d-flex fixed j-sa">
				<view class="scroll-item" v-for="(item,index) in tabBars" @click="changeTab(index)" :key="index"
					:id="'tab'+index" :class="tabIndex===index?'main-text-color':''">
					<view class=""> {{item.name}}</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>

		<view v-for="(item,index) in navList" :key="index" v-if="tabIndex==index">
			<view class="order" v-for="(list,listIndex) in item.orderList " :key="listIndex">
				<view class="d-flex border-bottom p-2 fs28">
					<view class="flex-1 ">{{list.create_time}}</view>
					<view class="order-status" :style="{'color':list.stateTipColor}">{{list.stateTip}}</view>
				</view>
				<view class="" v-for="(productItem,index) in list.product_list" :key="productItem.id"
					@tap="detail(productItem.product_id)">
					<view class="order-products d-flex">
						<image class="order-list-image" :src="productItem.cover_ico" mode="widthFix" />
						<view class="flex-column flex-1">
							<view class="order-list-title">{{productItem.product_name}}</view>
							<view class="Sold mt-1 ">{{productItem.parameter}}</view>
						</view>
						<view class="mr-2 mt-2">
							<view class="price">¥&nbsp;{{productItem.total}}</view>
							<view class="mt-1 item">x{{productItem.num}}</view>
						</view>
					</view>

				</view>
				<view class="d-flex " style="margin-left: 460rpx;">
					<view class="flex-column" style="font-weight: 600;">
						<view class="mr-1">总件数</view>
						<view class="mr-1">总价格 ¥</view>
					</view>
					<view class="flex-column" style="text-align: right;">
						<view class="">x{{list.total_num}}</view>
						<view class="">{{list.total}}</view>
					</view>
				</view>

				<view class="order-bottom d-flex">
					<view class="d-flex">
						<view class="order-bottom-status" style="background-color: #e80909;"
							@tap="payAgain(list.order_number)" v-if="list.status == 20">删除订单</view>
						<view class="d-flex" v-if="list.status == 0">

							<view class="order-bottom-status" style="background-color: #e80909;"
								@tap="goPay(list.order_number)">立即购买</view>
							<view class="order-bottom-status" @tap="canOrder(list.id)"
								style="background-color:darkgrey;">取消订单</view>

						</view>
						<view class="order-bottom-status " style="color: #e80909;margin-left: 250rpx;"
							v-else-if="list.status == 1">等待发货</view>
						<view class="" v-else-if="list.status == 10">
							<view class="order-bottom-status " style="color: #e80909;margin-left: 250rpx;"
								@tap="checkShipInfo(list.id)">查看物流</view>
							<view class="order-bottom-status " style="color: #e80909;margin-left: 250rpx;"
								@tap="conOrder(list.id)">确认收货</view>
						</view>

						<view class="order-bottom-status " style="color: #e80909;margin-left: 250rpx;"
							v-else-if="list.status == 20">已完成</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="navList[tabCurrentIndex].loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				// tag:'',
				tabCurrentIndex: 0,
				navList: [{
						state: -1,
						text: '全部',
						loadingType: 'more',
						page: 1,
						totalCount: 0,
						orderList: []
					},
					{
						state: 0,
						text: '待付款',
						loadingType: 'more',
						page: 1,
						totalCount: 0,
						orderList: []
					},
					{
						state: 1,
						text: '待发货',
						loadingType: 'more',
						page: 1,
						totalCount: 0,
						orderList: []
					},
					{
						state: 10,
						text: '待收货',
						loadingType: 'more',
						page: 1,
						totalCount: 0,
						orderList: []
					},
					{
						state: 20,
						text: '已完成',
						loadingType: 'more',
						page: 1,
						totalCount: 0,
						orderList: []
					}
				],
				goodsList: [],
				tabIndex: 0,
				tabBars: [{
						name: '全部订单',
					},
					{
						name: '待付款',
					},
					{
						name: '待发货',
					},
					{
						name: '待收货',
					},
					{
						name: '已完成',
					}
				]
			};
		},
		onLoad(options) {
			let result = this.$api.isLogin();
			if (result === false) {
				// return false;
			} else {
				let status = options.status
				this.navList.forEach((item, index) => {
					if (item.state == status) {
						this.tabIndex = index
						this.tabCurrentIndex = index
					}
				})
				this.loadData()
			}

		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			this.navList[this.tabCurrentIndex].page = 1
			this.navList[this.tabCurrentIndex].orderList = []
			this.loadData('refresh')
			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onReachBottom() {
			if (!this.hasLogin) {
				this.islogin = true;
				return false;
			}
			this.loadData()

		},

		methods: {
			changeTab(index) {
				if (this.tabIndex == index) {
					return
				}
				this.tabIndex = index
				this.tabCurrentIndex = index
				if (this.navList[index].orderList.length == 0) {
					this.loadData()
				}
			},
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
			toggle(type, index) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
				this.goodsList = this.navList[this.tabIndex].orderList[index].product_list
			},
			// 
			async orders(status) {
				let dataObj = {
					token: uni.getStorageSync('token'),
					page: this.navList[this.tabCurrentIndex].page,
					status: status
				}
				let res = await this.$myRequest({
					url: '/orders',
					methods: 'POST',
					data: dataObj
				})

				let ndata = res.data.data.list
				if (ndata.length > 0) {
					ndata.forEach(item => {
						let statusObj = this.orderStateExp(item.status)
						Object.assign(item, statusObj)
					})
				}
				let count = res.data.totalCount
				this.navList[this.tabCurrentIndex].totalCount = count
				if (this.navList[this.tabCurrentIndex].page === 1) {
					this.navList[this.tabCurrentIndex].orderList = ndata
					if (ndata.length > 0) {
						this.navList[this.tabCurrentIndex].page = this.navList[this.tabCurrentIndex].page + 1
					}
				} else {
					if (ndata.length > 0) {
						this.navList[this.tabCurrentIndex].orderList = [...this.navList[this.tabCurrentIndex]
							.orderList, ...
							ndata
						];
						this.navList[this.tabCurrentIndex].page = this.navList[this.tabCurrentIndex].page + 1;
					}
				}
				this.navList[this.tabCurrentIndex].loadingType = this.navList[this.tabCurrentIndex].orderList.length <
					this.navList[this.tabCurrentIndex].totalCount ? 'more' : 'nomore'
			},

			orderStateExp(state) {
				let stateTip = '',
					stateTipColor = '#e80909'
				switch (state) {
					case 0:
						stateTip = '待付款';
						break;
					case 1:
						stateTip = '待发货';
						break;
					case 10:
						stateTip = '待收获';
						break;
					case 20:
						stateTip = '已完成';
						stateTipColor = '#909399'
						break;
				}
				return {
					stateTip: stateTip,
					stateTipColor: stateTipColor
				}
			},

			// 
			async loadData(type = 'add') {
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let status = navItem.state;
				if (navItem.loadingType === 'nomore' && type == 'add') {
					return;
				}
				navItem.loadingType = 'loading';
				this.orders(status)
				setTimeout(() => {
					this.$set(navItem, 'loaded', true)
				}, 600)
			},

			//取消订单
			async canOrder(id) {
				let res = await this.$myRequest({
					url: '/canOrder',
					methods: "POST",
					data: {
						id: id,
						token: uni.getStorageSync('token')
					},
				})
				if (res.data.status == 1) {
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					})
					setTimeout(() => {
						this.initCurrentOrders()
						this.navList[1].orderList = []
						this.navList[1].page = 1;
						this.navList[1].totalCount = 0;
						this.navList[1].loadingType = 'more'
					}, 1000)
				}

			},
			//去支付
			async goPay(tag) {
				let res = await this.$myRequest({
					url: '/getOrder',
					methods: "POST",
					data: {
						tag: tag,
						token: uni.getStorageSync('token')
					},
				})

				if (res.data.status == 1) {
					// this.$toast('创建新订单');
					uni.showToast({
						title: '创建新订单',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/cart/order?tag=' + tag
						})
					}, 1000)
				} else {
					// this.$toast(res.msg);
					uni.showToast({
						title: '创建失败',
						icon: 'none'
					})
				}
			},

			//确认订单
			async conOrder(id) {
				let res = await this.$myRequest({
					url: '/conOrder',
					methods: "POST",
					data: {
						id: id,
						token: uni.getStorageSync('token')
					},
				})
				if (res.status == 1) {
					this.$toast(res.msg);
					this.initCurrentOrders()
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/user/user-orders?status=20"
						})
					}, 1000)
				}

			},
			// 删除订单
			async payAgain(id) {
				let res = await this.$myRequest({
					url: '/payAgain',
					methods: "POST",
					data: {
						id: id,
						token: uni.getStorageSync('token')
					},
				})
				if (res.data.status == 1) {
					// console.log(res.data.status)
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					})
					setTimeout(() => {
						this.initCurrentOrders()

					}, 1000)
				}
			},

			initCurrentOrders() {
				this.navList[this.tabCurrentIndex].page = 1
				this.loadData('refresh')
				this.navList[0].orderList = []
				this.navList[0].page = 1;
				this.navList[0].totalCount = 0;
				this.navList[0].loadingType = 'more'
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			},
			
			// 物流信息
			checkShipInfo(id) {
				uni.navigateTo({
					url: '/pages/user/shipInfo?id=' + id
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.scroll {
		background-color: white;
		width: 100%;
		height: 85rpx;
		position: fixed;
		top: 88upx;
		z-index: 99;

		.scroll-item {
			margin-top: 30rpx;
			font-size: 30rpx;
		}
	}

	.main-text-color {
		color: #e80909;
		border-bottom: 3rpx solid #e80909;
		height: 50rpx;
	}

	.order {
		margin: 0 auto;
		width: 96%;
		height: 100%;
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.order-status {
			font-size: 28rpx;
		}

		.order-bottom {
			width: 100%;
			text-align: right;
			direction: rtl;

		}


		.order-products {
			.order-list-image {
				width: 120rpx;
				height: 130rpx;
				margin: 20rpx;
			}

			.item {
				text-align: right;
				color: #868788;

			}

			.order-list-title {
				font-weight: 600;
				margin-top: 20rpx;
				width: 300rpx;
				white-space: nowrap; //单词在空格处：不换行
				overflow: hidden; //内容溢出的话：隐藏
				text-overflow: ellipsis; //溢出的文本用省略号代替
			}

			.Sold {
				width: 400rpx;
				color: #868788;
			}

			.fullPrice {
				text-align: right;
				// font-size: 30rpx;
			}

			.price {
				text-align: right;
			}
		}

		.order-bottom-status {
			width: 180rpx;
			height: 60rpx;
			margin: 20rpx 10rpx;
			text-align: center;
			line-height: 60rpx;
			color: white;
			border-radius: 50rpx;
		}
	}

	.color {
		color: #e80909;
	}
</style>
</style>